<template>
	<view class="detail">
		<u--image :showLoading="true" :src="goods.cover_url" width="750rpx" height="750rpx"></u--image>
		<view class="title">
			{{goods.title}}
		</view>
		<view class="info">
			<text class="price">￥{{goods.price}}</text>
			<text>销量：{{goods.sales}}</text>
		</view>
		<u-tabs :list="list" lineWidth="40" @change="showType" 
			:activeStyle="{color: '#3c9cff',fontWeight: 'bold',transform: 'scale(1.05)'}"
			:inactiveStyle="{color: '#303133',fontWeight: 'bold'}"
		></u-tabs>
		<view class="detail-content" >
			<u-parse :content="goods.details" v-show="isContent"></u-parse>
			<view class="comment" v-show="isComment">
				<view v-show="goods.comments && goods.comments.length===0">暂无评论</view>
				<view class="comment-item" v-for="(item, index) in goods.comments" :key="index">
					<view class="avatar">
						<u-avatar :src="item.user.avatar_url"></u-avatar>
					</view>
					<view class="info">
						<view class="name">{{item.user.name}}</view>
						<view class="content">{{item.content}}</view>
						<view class="date">{{item.created_at}}</view>
					</view>
				</view>
			</view>
			<goods-item :goods="like_goods" v-show="isRecommend"></goods-item>
		</view>
		<uni-goods-nav class="goods-nav" :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name: '商品详情'},
					{name: '商品评论',badge: {value: 0}},
					{name: '推荐商品'}
				],
				goods: {},
				like_goods: [],
				isContent: true,
				isComment: false,
				isRecommend: false,
				options: [
					{
						icon: 'star',
						text: '收藏'
					},
					{
							icon: 'cart',
							text: '购物车',
							info: 0
					},
				],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				isCollect: 0,
				goodsId: ''
			}
		},
		onLoad(options) {
			this.goodsId = options.id
			this.getDetail(options.id)
			this.getCart()
		},
		watch: {
			isCollect(newValue) {
				if (newValue) {
					this.options[0].icon = 'star-filled'
					this.options[0].text = '已收藏'
				}else {
					this.options[0].icon = 'star'
					this.options[0].text = '收藏'
				}
			}
		},
		methods: {
			// 获取商品详情数据
			async getDetail(id) {
				const res = await uni.$u.http.get(`/api/goods/${id}`)
				this.goods = res.goods
				this.like_goods = res.like_goods
				this.list[1].badge.value = res.goods.comments.length
				this.isCollect = res.goods.is_collect
			},
			// 切换tabs导航栏，显示对应的内容
			showType(params) {
				this.isContent = false
				this.isComment = false
				this.isRecommend = false
				if (params.index === 0) {
					this.isContent = true
				}else if (params.index === 1) {
					this.isComment = true
				}else if (params.index === 2) {
					this.isRecommend = true
				}
			},
			async onClick(e) {
				// 判断用户是否登录
				if (!this.$u.utils.isLogin()) return
				if (e.index === 0) {
					// 发送收藏与取消收藏请求
					await uni.$u.http.post(`/api/collects/goods/${this.goodsId}`)
					// 对收藏进行改变
					this.isCollect ? this.isCollect = 0 : this.isCollect = 1
				}else {
					uni.$u.route({
						type: 'switchTab',
						url: '/pages/cart/cart'
					})
				}
			},
			async buttonClick(e) {
				// 判断用户是否登录
				if (!this.$u.utils.isLogin()) return
				if (e.index === 0) {
					// 发送加入购物车的请求
					const res = await uni.$u.http.post('/api/carts', {
						goods_id: this.goodsId
					})
					uni.$u.toast('加入购物车成功！')
					this.getCart()
				} else if (e.index === 1) {
					uni.$u.toast('功能还未添加')
				}
			},
			// 获取购物车数据
			async getCart() {
				if (this.vuex_token) {
					const res = await uni.$u.http.get('/api/carts')
					// console.log(res)
					this.options[1].info = res.data.length
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail {
	.title {
		padding: 0 40rpx;
		font-size: 40rpx;
		font-weight: 700;
	}
	.info {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx 10rpx;
		.price {
			color: red;
		}
	}
	.detail-content {
		padding-bottom: 100rpx;
		.comment {
			.comment-item {
				display: flex;
				padding: 20rpx 40rpx;
				border-bottom: 2px solid #ccc;
				.avatar {
					margin-top: 20rpx;
				}
				.info {
					display: flex;
					flex-direction: column;
					.name{
						color: #3c9cff;
					}
					.content {
						margin: 20rpx 0 30rpx;
					}
					.date {
						color: #888;
					}
				}
			}
		}
	}
	.goods-nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}
</style>
